<%--
  Created by IntelliJ IDEA.
  User: 刘洪兆0720
  Date: 2022/4/28
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>上机考试系统</title>

    <link href="${path}/static/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>

<body style="background-color: #f1efec;">
<jsp:include page="teacher_head.jsp"></jsp:include>

<%
    String exam_start = (String) session.getAttribute("exam_start");
    if (exam_start != null) {
        if (exam_start.equals("true")) {
%>
<script type="text/javascript">
    alert("开启考试成功");
</script>
<%
    session.setAttribute("exam_start", null);
} else {
%>
<script type="text/javascript">
    alert("当前有考试正在进行，开启考试失败");
</script>
<%
            session.setAttribute("exam_start", null);
        }
    }
%>

<div class="container">
    <div class="alert navbar-inverse" style="background-color: #e7dbdb; margin-top: 20px; overflow: hidden">
        <strong style="margin-left: 20px; font-size: 18px;display: block">添加考试</strong>
        <form class="form-inline" role="form" onsubmit="return add()" style="margin-left: 20px; margin-top: 5px;">
            <div class="form-group" style="display: inline-block">
                <input type="text" name="e_name" class="form-control" style="width: 250px" placeholder="考试名称*">
            </div>
            <div class="form-group" style="display: inline-block;position: relative;left: 10px;">
                <div class="input-group date form_datetime" data-link-field="dtp_input2">
                    <input type="text" class="layui-input" id="datepicker" name="e_starttime" placeholder="设置考试时间"
                           style="width: 170px; background-color: #fff;">
                </div>
            </div>

            <div class="checkbox" style="display: inline-block;position: relative;left: 20px;">
                <input type="text" name="e_autostart" value="0" style="display: none">
                <label style="font-size: 15px;margin-left: 5px;"><input type="checkbox" name="checkbox">自动开始</label>
            </div>
            <button class="btn btn-info" type="submit"
                    style="display: inline-block;position: relative;left: 50px; width: 100px; background-color: #04346c">
                添加
            </button>
        </form>
    </div>

    <!-- 显示表格数据 -->
    <div class="row" style="margin-top: 30px">
        <div class="col-md-12">
            <strong style="display:block;margin-left: 20px; font-size: 18px">全部考试信息</strong>
            <!--分页文字信息  -->
            <div class="col-md-8 text-start" id="page_info_area"
                 style="margin-bottom: 10px;margin-left:5px;margin-top:20px;font-size: 15px;"></div>

            <table class="table table-responsive table-bordered table-striped table-hover" id="teas_table">
                <thead class="table-light">
                <tr>
                    <th class="col-md-2">考试名称</th>
                    <th class="col-md-2">考试时间</th>
                    <th class="col-md-1">创建人</th>
                    <th class="col-md-1">上传试卷</th>
                    <th class="col-md-1">自动开始</th>
                    <th class="col-md-1">进行中</th>
                    <th class="col-md-1">已结束</th>
                    <th class="col-md-1">已归档</th>
                    <th class="col-md-1">已清理</th>
                    <th class="col-md-1">操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row" style="margin-top: 100px;align-content: center">
        <!-- 分页条信息 -->
        <div class="col-md-12" id="page_nav_area" style="align-self: center"></div>
    </div>
</div>

<script type="text/javascript">
    var teaId = ${teacher.t_username};
    var currentPage, totalRecord;

    $(function () {
        $("input[name='checkbox']").click(function () {
            if ($("input[name='checkbox']:checked").val() == "on") {
                $("input[name='e_autostart']").val(1);
            } else {
                $("input[name='e_autostart']").val(0);
            }
        })
        to_page(1, teaId);
    })

    function add() {
        $.post("${path}/addExam", $('.form-inline').serialize(), function () {
            to_page(totalRecord, teaId);
        })
        alert("添加成功！");
        return false;
    }

    function to_page(pageNum, teaId) {
        $.ajax({
            url: "${path}/getAllExamsOfTea",
            data: {"pageNum": pageNum, "teaId": teaId},
            type: "GET",
            success: function (result) {
                //1、解析并显示教师数据
                buildTable(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }

    function buildTable(pageInfo) {
        //清空table表格
        $("#teas_table tbody").empty();
        var data = pageInfo.extend.pageInfo.list;
        var result = "";
        for (var i = 0; i < data.length; i++) {
            result += "<tr>"
            result += "<td>" + data[i].e_name + "</td>";
            result += "<td>" + jsDateFormat(data[i].e_starttime) + "</td>";
            result += "<td>" + data[i].e_teacher + "</td>";
            result += "<td>";
            if (data[i].e_examination != null) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_autostart == 1) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_isstart == 1 && data[i].e_isend == 0) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_isend == 1) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_file == 1) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_clear == 1) {
                result += "<span class='glyphicon glyphicon-ok'></span>";
            }
            result += "</td>";
            result += "<td>";
            if (data[i].e_isend == 0 && data[i].e_isstart == 1) {
                result += "<span>考试已开启</span>";
            }
            if (data[i].e_isend == 1) {
                result += "<span>考试已结束</span>";
            }
            if (data[i].e_isstart == 0 && data[i].e_isend == 0) {
                result += "<a href='${path}/goEditExam?e_name=" + data[i].e_name + "&e_starttime=" + data[i].e_starttime + "&e_teacher=" + data[i].e_teacher + "&e_autostart=" + data[i].e_autostart + "&e_isend=" + data[i].e_isend + "&e_file=" + data[i].e_file + "&e_clear=" + data[i].e_clear + "&e_isstart=" + data[i].e_isstart + "&e_examination=" + data[i].e_examination + "' title='编辑考试信息' class='glyphicon glyphicon-edit'></a>";
            }
            result += "</td>";
            result += "</tr>";
        }
        $("#tbody").html(result);
    }

    function jsDateFormat(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + "-" + hours + "-" + minutes + "-" + seconds;
    }


    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.extend.pageInfo.pageNum + "页,总共" +
            result.extend.pageInfo.pages + "页,总共" +
            result.extend.pageInfo.total + "条已发布考试记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //解析显示分页条，点击分页要能去下一页....
    function build_page_nav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }

        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //日期时间选择器
        laydate.render({
            elem: '#datepicker',
            type: 'datetime'
        });
    });
</script>
</body>
</html>
